import {View, Text} from "@tarojs/components";
import React, {useCallback, useEffect, useRef, useState} from "react";
import {Button, Cell, CellGroup, ISignatureInstance, Signature} from "@antmjs/vantui";
import Taro from "@tarojs/taro";
import LogUtils from "@/utils/log";
import Utils from "@/utils/common";
import {OrderItem} from "@/common/apis/model";
import {orderSignApi, uploadFileApi} from "@/common/apis/home_datasource";
import ShowUtils from "@/utils/show_utils";
import EventUtils from "@/utils/event_utils";
import LocalData from "@/common/local_data";
import './confirm_book.less'

definePageConfig({
  navigationBarTitleText: '签名确认'
})
export default function Confirm_book() {
  const instance = useRef<ISignatureInstance>()
  const orderInfo = useRef<OrderItem>();

  const eventChannel = useRef<Taro.EventChannel | null>();
  const getImageAction = async () => {
    if (instance.current) {
      const res = await instance.current.getImage()
      LogUtils.error(res.tempFilePath)
      if (res.tempFilePath) {
        const fileModel = await uploadFileApi(res.tempFilePath, 'sign')
        if (fileModel && fileModel.url) {
          orderSignApi(fileModel.url, orderInfo.current.id).then((res2) => {
            if (res2) {
              Utils.emit(eventChannel.current, EventUtils.OK, true)
              Utils.navigateBack()
            }
          })
        }
      }
    }
  }
  const clear = () => {
    if (instance.current) {
      instance.current.clear()
    }
  }
  const [, setRefresh] = useState({})
  useEffect(() => {
    const i = Utils.getI();
    const params = Utils.getParamsByRouter(i)
    eventChannel.current = Utils.getChannel(i)
    if (params && params.data) {
      orderInfo.current = Utils.getObjectWithUrl<OrderItem>(params.data)
      setRefresh({})
    }
  }, []);

  const getTitleNum = useCallback(() => {
    const machineType = orderInfo.current?.machineType;
    if (machineType === LocalData.notTimeId) {
      return '样品个数'
    } else {
      return '预约时长'
    }
  }, []);

  const getTitleNum2 = useCallback(() => {
    const machineType = orderInfo.current?.machineType;
    if (machineType === LocalData.notTimeId) {
      return orderInfo.current?.bookTotalTime ?? ''
    } else {
      return ShowUtils.getShowTime(orderInfo.current?.bookAllTimes) ?? ''
    }
  }, []);


  return (
    <View style={{display: 'flex', flexDirection: 'column', height: '100vh', backgroundColor: 'white'}}>
      {
        orderInfo.current ?
          <CellGroup title={<View
            style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#fff'}}
          >
            <Text style={{fontSize: '14px', color: 'black'}}>订单号</Text>
            <Text style={{fontSize: '12px', color: 'black'}}>{orderInfo.current?.id}</Text>
          </View>}
          ><Cell renderIcon='预约机器' title={orderInfo.current?.machineName}
            titleStyle={{marginLeft: '20px'}}
          />
            <Cell renderIcon='预约项目' title={orderInfo.current?.projectName} titleStyle={{marginLeft: '20px'}} />
            <Cell renderIcon={getTitleNum()} title={getTitleNum2()}
              titleStyle={{marginLeft: '20px'}}
            />
            <Cell renderIcon='预约价格' title={ShowUtils.getDefaultPrice(orderInfo.current?.actualAmount)}
              titleStyle={{marginLeft: '20px', color: 'red'}}
            />
          </CellGroup> : null
      }
      <Signature ref={instance} lineWidth={4} strokeStyle='green' />
      <View style={{marginTop: 20, display: 'flex'}}>
        <Button onClick={getImageAction} type='primary'>
          确认提交
        </Button>
        <Button onClick={clear} type='danger'>
          重绘
        </Button>
      </View>
    </View>
  )
}


